<template>
    <div class="tablediv">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="formInline.search" placeholder="请输入标题关键词" @blur="search"></el-input>
            </el-form-item>
            <!-- <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button type="info">重置</el-button>
            </el-form-item> -->
        </el-form>

        <div class="tablename">
            <span class="spantitle">知识库列表</span>
            <span class="spanadd" @click="addDialog = true"><i class="el-icon-plus"></i> 新增知识库</span>
        </div>
        <el-table :data="tableData" border style="width: 80%" class="Ktable1">
            <el-table-column prop="id" label="编码" width="180" align="center">
            </el-table-column>
            <el-table-column prop="title" label="知识标题" width="180" align="center">
                <template slot-scope="scope">
                    <span @click="watch(scope.row)" style="cursor: pointer;">{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="creater" label="创建人" align="center">
            </el-table-column>
            <el-table-column prop="time" label="创建时间" align="center">
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[3, 4, 5]" :page-size="count" layout="total, sizes, prev, pager, next, jumper" :total="total"
            align="center">
        </el-pagination>

        <!-- 添加弹出框 -->
        <el-dialog title="知识新增" :visible.sync="addDialog" width="50%">
            <el-form :model="addData" class="addDiv">
                <el-form-item label="知识标题" :label-width="formLabelWidth">
                    <el-input v-model="addData.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input v-model="addData.content" autocomplete="off" type="textarea" :rows="12"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="add">新增</el-button>
            </span>
        </el-dialog>

        <!-- 详情弹出框 -->
        <el-dialog title="知识详情" :visible.sync="watchDialog" width="50%">
            <el-form :model="watchData" class="addDiv">
                <el-form-item label="知识标题" :label-width="formLabelWidth">
                    <el-input v-model="watchData.title" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input v-model="watchData.content" autocomplete="off" type="textarea" :rows="12" disabled></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="watchDialog = false">取 消</el-button>
                <el-button type="primary" @click="watchDialog = false">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import myMixin from '../../utils/Time'
export default {
    mixins: [myMixin],
    data() {
        return {
            addDialog: false,
            watchDialog: false,
            total: 8,
            page: 1,
            count: 5,
            formLabelWidth: '100px',
            formInline: {
                search: '',
            },
            addData: {
                id: '',
                title: '',
                content: ''
            },
            watchData: {
                id: '',
                title: '标题',
                content: '内容内容内容内容内容内容内容内容内容内容内容内容'
            },
            tableData: []
        }
    },
    methods: {
        handleCurrentChange(v) {
            console.log(v)
            this.page = v;
            // this.formInline.search = ''
            this.test()
        },
        handleSizeChange(v) {
            this.count = v
            this.test()
        },
        test() {
            this.$axios({
                url: '/Firewall2',
                method: 'get',
                headers: {
                    'X-Total-Count': 'true' // 添加 X-Total-Count 头部
                },
                params: {
                    q: `${this.formInline.search}`,
                    _page: this.page,
                    _limit: this.count,
                }
            }).then(({ data, headers }) => {
                this.total = Number(headers['x-total-count'])
                this.tableData = data
            })
        },
        search() {
            this.page = 1
            this.test()
        },
        watch(v) {
            this.watchDialog = true
            this.watchData.title = v.title
            this.watchData.content = v.content
        },
        add() {
            this.addDialog = false
            this.$axios({
                url: '/Firewall2',
                method: 'post',
                data: {
                    title: this.addData.title,
                    content: this.addData.content,
                    creater: JSON.parse(sessionStorage.getItem('登录信息')).username,
                    time: this.nowtime()
                }
            }).then(({ data }) => {
                if (data) {
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                        duration: 1400
                    })
                    this.test()
                    this.addData.title = ''
                    this.addData.content = ''
                } else {
                    alert('添加失败')
                }
            })
        }
    },
    mounted() {
        this.test()
    }
}
</script>

<style lang="less" scoped>
.tablediv {
    width: 100%;
    height: 100%;
    position: relative;

    .demo-form-inline {
        margin-left: 60px;
        margin-top: 50px;

    }

    .Ktable1 {
        margin-left: 60px;
    }

    .tablename {
        margin-top: 30px;
        margin-left: 60px;
        width: calc(80% - 2px);
        height: 46px;
        background: #F5F8FA;
        border: 1px solid #EBEEF5;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .spantitle {
            width: 70px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 20px;
            margin-left: 30px;
        }

        .spanadd {
            // width: 80px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #3BC95B;
            line-height: 17px;
            margin-right: 30px;
            cursor: pointer;
        }
    }

    .pageCount {
        position: absolute;
        bottom: 20px;
        left: 560px;
    }
}
</style>